<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning">
      <a-space direction="vertical" style="width: 100%">
        <div>
          <a-row :gutter="16" type="flex" align="middle">
            <a-col :span="6">
              <a-row type="flex" align="middle">
                <a-col :span="12">
                  <span class="title">基本信息</span>
                </a-col>
                <a-col :span="12">
                  <viewerImage
                    fit="contain"
                    :lazy="false"
                    :src="require('@/assets/images/assureInfo.png')"
                    style="width: 100px; height: 100px"
                  ></viewerImage>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="18">
              <a-descriptions>
                <!-- <a-descriptions-item label="区县">{{ getDeptName('RegionNo') }}</a-descriptions-item>
                <a-descriptions-item label="社区/乡镇">{{ getDeptName('TownshipNo') }}</a-descriptions-item> -->
                <a-descriptions-item label="区县">{{ assureInformation.RegionName }}</a-descriptions-item>
                <a-descriptions-item label="社区/乡镇">{{ assureInformation.TownshipName }}</a-descriptions-item>
                <a-descriptions-item label="家庭（辈）">{{ assureInformation.StrDegress }}</a-descriptions-item>
                <a-descriptions-item label="申请家庭类别">{{ assureInformation.ApplyClass }}</a-descriptions-item>
                <a-descriptions-item label="房屋总建筑面积㎡"
                  >{{ assureInformation.StrLiveHousingArea }}㎡</a-descriptions-item
                >
                <a-descriptions-item label="核定保障人数">{{ assureInformation.CityVfyNumber }}</a-descriptions-item>
                <a-descriptions-item label="核定人均面积㎡"
                  >{{ assureInformation.CityVfyAreaPer }}㎡</a-descriptions-item
                >
                <a-descriptions-item label="核定人均收入" v-if="assureInformation.ApplyClass === '低收入'">{{
                  assureInformation.CityVfyIncome || '/'
                }}</a-descriptions-item>
                <a-descriptions-item label="保障方式">{{ assureInformation.CityVfyAssign }}</a-descriptions-item>
                <a-descriptions-item label="现住房性质">{{ assureInformation.HousCategory }}</a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-row>
          <a-divider></a-divider>
        </div>
        <div>
          <p class="title m-b-24">保障成员名单</p>
          <a-table
            rowKey="ID"
            size="middle"
            :columns="$store.state.user.sfsq == '是' ? assurePhoneColumns : assureColumns"
            :data-source="assureInformation.proposerdetail"
            :pagination="false"
            :expandIconColumnIndex="6"
            :expandIconAsCell="false"
            :expandIcon="expandIcon"
          >
            <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
            <span slot="phone" slot-scope="text, record">
              <a-input-search v-model="record.Phones" placeholder="请输入电话号码">
                <!-- <a-button slot="enterButton">确定</a-button> -->
                <a-popconfirm
                  title="您确定修改此电话号码？"
                  slot="enterButton"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="eaitPhone(record, record.Phones)"
                  @cancel="cancel"
                >
                  <a href="#">确定</a>
                </a-popconfirm>
              </a-input-search>
            </span>
            <a-tag slot="Sexs" slot-scope="text">{{ text }}</a-tag>
            <span slot="Relation" slot-scope="text">{{ text | $lable(Relation) }}</span>
            <!-- <div slot="action" slot-scope="text, record">
              <y-button type="link" @click="handleDetail(record.ID)">查看</y-button>
            </div> -->
            <a-descriptions slot="expandedRowRender" slot-scope="record" size="small" :column="4">
              <a-descriptions-item label="姓名">{{ record.Name }}</a-descriptions-item>
              <a-descriptions-item label="身份证号">{{ record.IDCards }}</a-descriptions-item>
              <a-descriptions-item label="性别">{{ record.Sexs }}</a-descriptions-item>
              <a-descriptions-item label="出身日期">{{ record.Birthdays | moment('YYYY-MM-DD') }}</a-descriptions-item>
              <a-descriptions-item label="民族">{{ record.Nations | $lable(Nation) }}</a-descriptions-item>
              <a-descriptions-item label="关系">{{ record.Relation | $lable(Relation) }}</a-descriptions-item>
              <a-descriptions-item label="文化程度">{{ record.College | $lable(College) }}</a-descriptions-item>
              <a-descriptions-item label="婚姻状况">{{ record.Maritalstas }}</a-descriptions-item>
              <a-descriptions-item label="联系电话">{{ record.Phones }}</a-descriptions-item>
              <a-descriptions-item label="就业情况">{{ record.Employment }}</a-descriptions-item>
              <a-descriptions-item label="工作单位">{{ record.WorkUnits }}</a-descriptions-item>
              <a-descriptions-item label="职业">{{ record.Profession | $lable(Profession) }}</a-descriptions-item>
              <a-descriptions-item label="居住地址" :span="2">{{
                `贵州省贵阳市${record.LiveDistrictAddress}${record.LiveAddresss}`
              }}</a-descriptions-item>
              <a-descriptions-item label="是否残疾" :span="record.IfDisabilitys === '否' ? 2 : 1">{{
                record.IfDisabilitys
              }}</a-descriptions-item>
              <a-descriptions-item label="残疾类型" v-if="record.IfDisabilitys === '是'">{{
                record.DisabilityTypes | $lable(DisabilityType)
              }}</a-descriptions-item>
              <a-descriptions-item label="残疾等级" v-if="record.IfDisabilitys === '是'">{{
                record.DisabilityLevels | $lable(DisabilityLevel)
              }}</a-descriptions-item>
              <a-descriptions-item label="户籍信息">{{ record.ApplyTypes }}</a-descriptions-item>
              <a-descriptions-item label="申请人所属群体">
                <a-tag v-for="item in getGroupsArr(record.GroupOfApplicants)" :key="item">{{ item }}</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="收入认定">{{ assureInformation.ApplyClass }}</a-descriptions-item>
              <a-descriptions-item label="低保证号" v-if="assureInformation.ApplyClass === '低保'">{{
                record.LowObjectNOs
              }}</a-descriptions-item>
              <a-descriptions-item label="户籍地址">
                {{ record.ProvinceAddress }}{{ record.CityAddress }}{{ record.DistrictAddress
                }}{{ record.CensusRegAddresss }}
              </a-descriptions-item>
            </a-descriptions>
          </a-table>
        </div>
        <div>
          <p class="title m-y-24">未纳入保障成员名单</p>
          <a-table
            rowKey="ID"
            size="middle"
            :columns="unAssureColumns"
            :data-source="assureInformation.proposerfdetail"
            :pagination="false"
          >
            <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
            <span slot="FRelation" slot-scope="text">{{ text }}</span>
          </a-table>
        </div>

        <div v-if="['自有产权房', '承租公房'].includes(assureInformation.HousCategory)">
          <p class="title m-y-24">住房情况填写</p>
          <a-table
            rowKey="ID"
            size="middle"
            :columns="assureInformation.HousCategory === '自有产权房' ? zycqColumns : czgfColumns"
            :data-source="assureInformation.proposerdetailhouses"
            :pagination="false"
          >
            <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
            <a-descriptions
              v-if="assureInformation.HousCategory === '自有产权房'"
              slot="expandedRowRender"
              slot-scope="record"
              size="small"
              :column="4"
            >
              <a-descriptions-item label="成员类别">{{ record.DetailCategory }}</a-descriptions-item>
              <a-descriptions-item label="自有产权房产权人姓名">{{ record.PropertyName }}</a-descriptions-item>
              <a-descriptions-item label="自有产权房建筑面积">{{ record.PropertyArea }}m²</a-descriptions-item>
              <a-descriptions-item label="自有产权房个人产权面积">{{ record.PropertyOwnArea }}m²</a-descriptions-item>
              <a-descriptions-item label="自有产权房证号">{{ record.PropertyNo }}</a-descriptions-item>
              <a-descriptions-item label="房屋详细地址">{{ record.HouseAddress }}</a-descriptions-item>
              <a-descriptions-item label="成套情况">{{ record.IfComplete }}</a-descriptions-item>
              <a-descriptions-item label="说明">{{ record.Remark }}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions v-else slot="expandedRowRender" slot-scope="record" size="small" :column="4">
              <a-descriptions-item label="成员类别">{{ record.DetailCategory }}</a-descriptions-item>
              <a-descriptions-item label="公房所有权单位名称">{{ record.PublicUnit }}</a-descriptions-item>
              <a-descriptions-item label="租住公房建筑面积">{{ record.PublicArea }}m²</a-descriptions-item>
              <a-descriptions-item label="房屋详细地址">{{ record.HouseAddress }}</a-descriptions-item>
              <a-descriptions-item label="成套情况">{{ record.IfComplete }}</a-descriptions-item>
              <a-descriptions-item label="说明">{{ record.Remark }}</a-descriptions-item>
            </a-descriptions>
          </a-table>
        </div>
        <div v-if="assureInformation.CityVfyAssign == '实物安置'">
          <p class="title m-y-24">实物信息</p>
          <div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card title="实物分配时间" :bordered="false">
                  <p>{{ assureInformation.ESetDate }}</p>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card title="实物分配信息" :bordered="false">
                  <p>{{ assureInformation.ESitesSelect }}</p>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
        <div v-if="assureInformation.CityVfyAssign == '租赁住房补贴'">
          <p class="title m-y-24">租赁住房补贴</p>
          <div>
            <a-form :form="subsidyForm" layout="inline">
              <a-row :gutter="16">
                <a-col :span="14">
                  <a-form-item label="计算公式">
                    <p>金额 = 补贴常数 × 补贴人数 × 补贴面积 × 补贴月数 × 补贴系数</p>
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="更改前补贴">
                    <p>{{ oldSMoney }}</p>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="补贴金额">
                    <a-input-number disabled v-decorator="['SMoney', { initialValue: '' }]" />
                  </a-form-item>
                  <a-form-item label="(元) =" :colon="false">
                    <a-input-number disabled v-decorator="['SVarConst', { initialValue: '' }]" />
                  </a-form-item>
                  <a-form-item label="X" :colon="false">
                    <a-input-number disabled v-decorator="['SVarNumber', { initialValue: '' }]" />
                  </a-form-item>
                  <a-form-item label="X" :colon="false">
                    <a-input-number disabled v-decorator="['SVarArea', { initialValue: '' }]" />
                  </a-form-item>
                  <a-form-item label="X" :colon="false">
                    <a-input-number disabled v-decorator="['SVarMonth', { initialValue: '' }]" />
                  </a-form-item>
                  <a-form-item label="X" :colon="false">
                    <a-input-number disabled v-decorator="['SVarPercent', { initialValue: '' }]" />
                  </a-form-item>
                  <a-form-item label="" :colon="false">
                    <y-button icon="redo" type="danger" @click="computedSubsidy">重新计算</y-button>
                  </a-form-item>
                  <!-- <a-space align="baseline" size="large" style="">
                    <y-button icon="redo" type="danger" @click="computedSubsidy">重新计算</y-button>
                  </a-space> -->
                  <p class="text-error">注：补贴金额不足100元的按100元保障，补贴人数为1个人时按2个人计算补贴</p>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </a-space>
    </a-spin>
  </a-card>
</template>

<script>
import { viewerImage } from '@/components'
import { getNewProposerbyID, getDropdownList, Set_ProposerPhone } from '@/api/common'
import { getDeptDropList, subsidycalculation } from '@/api/communityReviewManagement'
import { validChineseChar, validIDCard, validTelphone } from '@/utils/validate'
import { validNumber } from '@/utils/validate'
import store from '@/store/index'
const findItem = (data, value, key = 'DROPKEY', label = 'DROPVALUE') => {
  if (validNumber(value)) {
    value = Number(value)
  }
  const item = data.find((e) => e[key] === value)
  if (!item) return ''
  return item[[label]]
}
export default {
  // name: 'cityComplexInquireList',
  components: {
    viewerImage,
  },
  props: {
    applyNO: {
      type: String,
      default: '',
    },
    proposerID: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      assureInformation: {},
      showPhone: false,
      phoness: '',
      spinning: false,
      DeptList: [],
      Nation: [],
      oldSMoney: '0',
      form: this.$form.createForm(this, { name: 'editPhone' }),
      subsidyForm: this.$form.createForm(this, { name: 'subsidy' }),
      Relation: [
        {
          DROPKEY: 0,
          DROPVALUE: '申请人',
        },
      ],
      College: [],
      Profession: [],
      DisabilityType: [],
      DisabilityLevel: [],
      Groups: [],
      // 保障成员
      assureColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'Name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'Sexs',
          align: 'center',
          scopedSlots: { customRender: 'Sexs' },
        },
        {
          title: '身份证号',
          key: 'IDCards',
          dataIndex: 'IDCards',
          align: 'center',
        },
        {
          title: '户籍信息',
          dataIndex: 'ApplyTypes',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'Relation',
          align: 'center',
          scopedSlots: { customRender: 'Relation' },
        },
        {
          title: '操作',
          align: 'center',
          // dataIndex: 'Relation',
          // width: '180px',
          // fixed: 'right',
          // scopedSlots: { customRender: 'action' },
          scopedSlots: { customRender: 'Relation' },
        },
      ],
      assurePhoneColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'Name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'Sexs',
          align: 'center',
          scopedSlots: { customRender: 'Sexs' },
        },
        {
          title: '身份证号',
          key: 'IDCards',
          dataIndex: 'IDCards',
          align: 'center',
        },
        // {
        //   title: '电话号码',
        //   dataIndex: 'Phones',
        //   align: 'center',
        //   scopedSlots: { customRender: 'phone' },
        // },
        {
          title: '户籍信息',
          dataIndex: 'ApplyTypes',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'Relation',
          align: 'center',
          scopedSlots: { customRender: 'Relation' },
        },
        {
          title: '操作',
          align: 'center',
          // dataIndex: '',
          // width: '180px',
          // fixed: 'right',
          scopedSlots: { customRender: 'Relation' },
        },
      ],
      // 未纳入保障成员
      unAssureColumns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'FName',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'FIDCard',
          align: 'center',
        },
        {
          title: '户籍信息',
          dataIndex: 'Category',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'FRelation',
          scopedSlots: { customRender: 'FRelation' },
          align: 'center',
        },
      ],
      // 承租公房
      czgfColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '成员类别',
          key: 'DetailCategory',
          dataIndex: 'DetailCategory',
          align: 'center',
        },
        {
          title: '姓名',
          key: 'DetailName',
          dataIndex: 'DetailName',
          align: 'center',
        },
        {
          title: '公司所有权单位名称',
          key: 'PublicUnit',
          dataIndex: 'PublicUnit',
          align: 'center',
        },
        {
          title: '租住公房建筑面积(m²)',
          key: 'PublicArea',
          dataIndex: 'PublicArea',
          align: 'center',
        },
      ],
      zycqColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '成员类别',
          key: 'DetailCategory',
          dataIndex: 'DetailCategory',
          align: 'center',
        },
        {
          title: '姓名',
          key: 'DetailName',
          dataIndex: 'DetailName',
          align: 'center',
        },
        {
          title: '自有产权房产权人姓名',
          key: 'PropertyName',
          dataIndex: 'PropertyName',
          align: 'center',
        },
        {
          title: '自有产权房建筑面积(m²)',
          key: 'PropertyArea',
          dataIndex: 'PropertyArea',
          align: 'center',
        },
        {
          title: '自有产权房个人产权面积(m²)',
          key: 'PropertyOwnArea',
          dataIndex: 'PropertyOwnArea',
          align: 'center',
        },
      ],
      //实物信息
      swxxColumns: [
        {
          title: '实物分配时间',
          key: 'ESetDate',
          dataIndex: 'ESetDate',
          align: 'center',
        },
        {
          title: '实物分配信息',
          key: 'ESitesSelect',
          dataIndex: 'ESitesSelect',
          align: 'center',
        },
      ],
    }
  },
  filters: {
    $lable(value, data, key, label) {
      return findItem(data, value, key, label)
    },
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    expandIcon(props) {
      if (props.expanded) {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <y-button
            type="link"
            onClick={(e) => {
              props.onExpand(props.record, e)
            }}
          >
            收起
          </y-button>
        )
      } else {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <y-button
            type="link"
            onClick={(e) => {
              props.onExpand(props.record, e)
            }}
          >
            查看
          </y-button>
        )
      }
    },
    fetchData() {
      this.spinning = true
      const getNewProposer = getNewProposerbyID({
        ProposerID: this.$route.params.id || this.proposerID,
      })
      const getDeptList = getDeptDropList({ userid: this.$store.getters.userid })
      const getNation = getDropdownList({ PmKey: 'Nation' })
      const getRelation = getDropdownList({ PmKey: 'Relation' })
      const getCollege = getDropdownList({ PmKey: 'College' })
      const getProfession = getDropdownList({ PmKey: 'Profession' })
      const getDisabilityType = getDropdownList({ PmKey: 'DisabilityType' })
      const getDisabilityLevel = getDropdownList({ PmKey: 'DisabilityLevel' })
      const getGroups = getDropdownList({ PmKey: 'Groups' })
      Promise.all([
        getNewProposer,
        getDeptList,
        getNation,
        getRelation,
        getCollege,
        getProfession,
        getDisabilityType,
        getDisabilityLevel,
        getGroups,
      ])
        .then((res) => {
          this.assureInformation = res[0]
          this.$emit('update:applyNO', res[0].ApplyNO)
          this.DeptList = res[1][0].children
          this.Nation = res[2]
          this.Relation.push(...res[3])
          this.College = res[4]
          this.Profession = res[5]
          this.DisabilityType = res[6]
          this.DisabilityLevel = res[7]
          this.Groups = res[8]
          this.computedSubsidy()
        })
        .finally(() => {
          this.spinning = false
        })
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入您的联系电话!'))
      }
      if (!validTelphone(value)) {
        callback(new Error('联系电话输入有误，请重新输入!'))
      }
      callback()
    },
    eaitPhone(record, text) {
      this.form.validateFields((err, values) => {
        if (!err) {
          // this.spinning = true
          // Set_ProposerPhone({
          //   ID: record.ID,
          //   LID: record.LID,
          //   Phone: text,
          // }).then(() => {
          //   this.$message.success('修改成功')
          //   getNewProposerbyID({
          //     ProposerID: this.$route.params.id || this.proposerID,
          //   })
          //     .then(() => {
          //       this.assureInformation = res
          //     })
          //     .finally(() => {
          //       // this.$message.success('修改成功')
          //       this.spinning = false
          //     })
          // })
        }
      })
    },
    cancel(e) {
      this.$message.error('已取消修改')
    },
    getDeptName(key) {
      if (this.$isEmpty(this.DeptList)) return ''
      const RegionNo = this.assureInformation.RegionNo
      const TownshipNo = this.assureInformation.TownshipNo
      if (key === 'RegionNo') {
        return findItem(this.DeptList, RegionNo, 'ID', 'name')
      }
      if (key === 'TownshipNo') {
        const deptItem = this.DeptList.find((e) => e.ID === Number(RegionNo))
        return findItem(deptItem.children, TownshipNo, 'ID', 'name')
      }
      return ''
    },
    getGroupsArr(GroupOfApplicants) {
      const labelArr = []
      if (!this.$isEmpty(this.Groups) && !this.$isEmpty(GroupOfApplicants)) {
        GroupOfApplicants = GroupOfApplicants.split(',').forEach((e) => {
          this.Groups.forEach((item) => {
            if (item.DROPKEY === Number(e)) {
              labelArr.push(item.DROPVALUE)
            }
          })
        })
      }
      return labelArr
    },
    computedSubsidy() {
      const data = this.form.getFieldsValue(['CityVfyNumber', 'ApplyClass', 'CityVfyAreaPer', 'HousCategory'])
      const { CityVfyNumber: Number, CityVfyAreaPer: dMaxArea, ApplyClass } = this.assureInformation
      if (this.assureInformation.ApplyClass === '低保' || this.assureInformation.ApplyClass === '低收入') {
        this.oldSMoney = this.subsidyForm.getFieldValue('SMoney') || 0
        subsidycalculation({
          config: {
            Number,
            dMaxArea,
            coefficient: ApplyClass === '低收入' ? 0.5 : 1,
          },
        }).then((res) => {
          const { dConst, Number, dMaxArea, iMonth, coefficient, money } = res.data
          this.subsidyForm.setFieldsValue({
            SMoney: money,
            SVarConst: dConst,
            SVarNumber: Number,
            SVarArea: dMaxArea,
            SVarMonth: iMonth,
            SVarPercent: coefficient,
          })
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
</style>
